<template>
  <div class="station-container">
    <n-grid :cols="24" :x-gap="12" style="height: calc(100vh - 150px)">
      <!-- 左侧组织机构树 -->
      <n-gi :span="6">
        <OrgTree
          ref="orgTreeRef"
          @set="handleOrgSelect"
          @reload="handleOrgReload"
          @loaded="handleOrgTreeLoaded"
        />
      </n-gi>

      <!-- 右侧站场配置表单 -->
      <n-gi :span="18">
        <n-card title="配置站场" :bordered="false" class="h-full">
          <n-form
            ref="formRef"
            :model="formModel"
            :rules="rules"
            label-placement="left"
            label-width="120"
            :style="{ maxWidth: '800px' }"
          >
            <!-- 基本信息 -->
            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="站场名称" path="stationName">
                  <n-input v-model:value="formModel.stationName" placeholder="请输入站场名称" />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="所属机构" path="orgName">
                  <n-input
                    v-model:value="formModel.orgName"
                    placeholder="请选择所属机构"
                    disabled
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="站场编码" path="stationCode">
                  <n-input v-model:value="formModel.stationCode" placeholder="请输入站场编码" />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="方向" path="directionName">
                  <n-select
                    v-model:value="formModel.directionName"
                    :options="directionOptions"
                    placeholder="请选择方向"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <!-- 方向详情 -->
            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="东方向" path="directionEast">
                  <n-input v-model:value="formModel.directionEast" placeholder="请输入东方向" />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="西方向" path="directionWest">
                  <n-input v-model:value="formModel.directionWest" placeholder="请输入西方向" />
                </n-form-item>
              </n-gi>
            </n-grid>

            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="南方向" path="directionSouth">
                  <n-input v-model:value="formModel.directionSouth" placeholder="请输入南方向" />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="北方向" path="directionNorth">
                  <n-input v-model:value="formModel.directionNorth" placeholder="请输入北方向" />
                </n-form-item>
              </n-gi>
            </n-grid>

            <!-- 地图信息 -->
            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="中心经度" path="centerLongitude">
                  <n-input-number
                    v-model:value="formModel.centerLongitude"
                    :precision="6"
                    :step="0.000001"
                    placeholder="请输入中心经度"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="中心纬度" path="centerLatitude">
                  <n-input-number
                    v-model:value="formModel.centerLatitude"
                    :precision="6"
                    :step="0.000001"
                    placeholder="请输入中心纬度"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="地图缩放级别" path="mapZoom">
                  <n-input-number
                    v-model:value="formModel.mapZoom"
                    :min="0"
                    placeholder="请输入地图缩放级别"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="地图旋转角度" path="mapRotate">
                  <n-input-number
                    v-model:value="formModel.mapRotate"
                    :min="0"
                    :max="360"
                    placeholder="请输入地图旋转角度"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <!-- 文件信息 -->
            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="文件名称" path="fileName">
                  <n-input v-model:value="formModel.fileName" placeholder="请输入文件名称" />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="离线文件路径" path="offlineFilePath">
                  <n-input
                    v-model:value="formModel.offlineFilePath"
                    placeholder="请输入离线文件路径"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="离线文件校验码" path="offlineZipfile">
                  <n-input
                    v-model:value="formModel.offlineZipfile"
                    placeholder="请输入离线文件校验码"
                  />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="离线缩放级别" path="offlineZoom">
                  <n-input-number
                    v-model:value="formModel.offlineZoom"
                    :min="0"
                    placeholder="请输入离线缩放级别"
                    style="width: 100%"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <!-- 联系信息 -->
            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="12">
                <n-form-item label="负责人" path="stationCharge">
                  <n-input v-model:value="formModel.stationCharge" placeholder="请输入负责人" />
                </n-form-item>
              </n-gi>
              <n-gi :span="12">
                <n-form-item label="联系电话" path="stationTelephone">
                  <n-input
                    v-model:value="formModel.stationTelephone"
                    placeholder="请输入联系电话"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="24">
                <n-form-item label="站场地址" path="stationAddress">
                  <n-input
                    v-model:value="formModel.stationAddress"
                    type="textarea"
                    placeholder="请输入站场地址"
                    :autosize="{ minRows: 2 }"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="24">
                <n-form-item label="备注" path="remark">
                  <n-input
                    v-model:value="formModel.remark"
                    type="textarea"
                    placeholder="请输入备注"
                    :autosize="{ minRows: 2 }"
                  />
                </n-form-item>
              </n-gi>
            </n-grid>

            <!-- 操作按钮 -->
            <n-grid :cols="24" :x-gap="24">
              <n-gi :span="24">
                <n-space>
                  <n-button type="primary" @click="handleConfirm">确认</n-button>
                  <n-button @click="handleReset">重置</n-button>
                  <n-button type="error" @click="handleDelete">删除</n-button>
                </n-space>
              </n-gi>
            </n-grid>
          </n-form>
        </n-card>
      </n-gi>
    </n-grid>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useMessage } from 'naive-ui';
  import OrgTree from '@/views/businessPages/comp/org/orgTree.vue';
  import { getStationById } from '@/api/business/stationManager/station';

  // 组件引用
  const formRef = ref();
  const orgTreeRef = ref();
  const message = useMessage();

  // 当前选中的组织ID
  const selectedOrgId = ref<string>('');

  // 表单数据模型
  const formModel = ref({
    centerLatitude: null,
    centerLongitude: null,
    direction: '',
    directionEast: '',
    directionNorth: '',
    directionSouth: '',
    directionWest: '',
    fileName: '',
    filePath: '',
    mapRotate: null,
    mapZoom: null,
    offlineFilePath: '',
    offlineZipfile: '',
    offlineZoom: null,
    orgArray: '',
    orgArrayName: '',
    orgId: '',
    orgName: '',
    remark: '',
    spanner: null,
    stationAddress: '',
    stationCharge: '',
    stationCode: '',
    stationId: '',
    stationName: '',
    stationTelephone: '',
    directionName: '',
  });

  // 方向选项
  const directionOptions = [
    { label: '东西', value: '东西' },
    { label: '南北', value: '南北' },
  ];

  // 表单验证规则
  const rules = {
    stationName: {
      required: true,
      message: '请输入站场名称',
      trigger: 'blur',
    },
    orgName: {
      required: true,
      message: '请选择所属机构',
      trigger: 'blur',
    },
    stationCode: {
      required: true,
      message: '请输入站场编码',
      trigger: 'blur',
    },
  };

  // 处理组织机构选择
  function handleOrgSelect(id: string, name: string) {
    selectedOrgId.value = id;
    // 这里可以根据选中的组织ID加载对应的站场信息
    // loadStationDataByOrgId(id);
  }

  // 处理组织树重新加载
  function handleOrgReload() {
    console.log('组织树重新加载完成');
  }

  // 处理组织树加载完成事件
  function handleOrgTreeLoaded() {
    console.log('组织树加载完成');
    // 可以在这里初始化默认选中的组织节点
  }

  // 获取站点信息
  const loadStationData = async () => {
    try {
      // 这里需要传入实际的站点ID
      const res = await getStationById({ id: '3d3691bee2e8d441ef0184aa9c68603d' });
      if (res) {
        formModel.value = { ...formModel.value, ...res };
      } else {
        message.error(res.errMsg || '获取站点信息失败');
      }
    } catch (error) {
      message.error('获取站点信息失败: ' + (error.message || '未知错误'));
    }
  };

  // 确认按钮处理
  const handleConfirm = async () => {
    try {
      await formRef.value?.validate();
      // 这里调用保存接口
      message.success('保存成功');
    } catch (error) {
      message.error('请检查表单数据');
    }
  };

  // 重置按钮处理
  const handleReset = () => {
    formRef.value?.restoreValidation();
    loadStationData();
  };

  // 删除按钮处理
  const handleDelete = () => {
    window['$dialog']?.warning({
      title: '确认删除',
      content: '确定要删除该站场信息吗？此操作不可恢复！',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
        // 这里调用删除接口
        message.success('删除成功');
      },
    });
  };

  // 组件挂载时加载数据
  onMounted(() => {
    loadStationData();
  });
</script>

<style scoped>
  .station-container {
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
  }

  :deep(.n-card) {
    height: 100%;
  }
</style>
